<template>
  <div class="ReportAddItem">
    <el-dialog
      title="添加报告单项目"
      :visible.sync="dialogFormVisible"
      :center="isCenter"
      width="500px"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        :rules="roleRules"
        class="flex-form"
      >
        <el-form-item
          label="项目名称："
          prop="itemName"
          label-width="100px"
          style="margin-bottom: 0px;"
        >
          <el-input
            type="textarea"
            v-model="dataForm.itemName"
            autocomplete="off"
            :rows="3"
            :cols="30"
          ></el-input>
        </el-form-item>
        <span class="lot-min">
          <i class="el-icon-warning" />多个项目以逗号隔开（支持中/英文）</span
        >
        <el-form-item align="center">
          <el-button @click.native="clickCancel">取 消</el-button>
          <el-button type="primary" @click.native="clickCommit"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as message from "@/constants/message";
import ReportApi from "@/api/hsReport/hsReport";
export default {
  name: "ReportAddItem",
  props: {
    reportId: {
      type: Number,
      default: null
    }
  },
  created() {
    this.dataForm.itemName = "";
    this.dataForm.reportId = "";
  },
  data() {
    return {
      type: "",
      dataForm: {
        reportId: "",
        itemName: ""
      },
      dialogFormVisible: false,
      isCenter: true,
      roleRules: {
        itemName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          { max: 500, message: "项目名称长度不超过500个字", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    clickCancel() {
      // 事件结束后清空数据
      this.dialogFormVisible = false;
      this.dataForm.reportId = "";
      this.dataForm.itemName = "";
    },
    clickCommit() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SUBMIT,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            this.addData();
          });
        }
      });
    },
    addData() {
      let _this = this;
      _this.dataForm.reportId = _this.reportId;
      ReportApi.checkReportItem(_this.dataForm).then(res => {
        _this.$Utils.notifySuccess();
        _this.dialogFormVisible = false;
        //刷新父组件
        _this.$emit("reload");
        //this.$router.go(0)
      });
    },
    handleCreate() {
      this.dialogFormVisible = true;
    }
  }
};
</script>
<style lang="scss">
.variant-input {
  margin-top: 2px;
}
.ReportAddItem .country_ul {
  position: relative;
}
.country_ul .country_tabs {
  float: left;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  margin-bottom: -4px;
}
.country_ul .country_tabs li {
  float: left;
  cursor: pointer;
  background-color: #eee;
  width: 60px;
  height: 35px;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.country_ul .country_tabs .active {
  background-color: #fff;
}
.country_ul .country_tabs li a {
  span {
    line-height: 30px;
    margin-left: 15px;
  }
}
.variant_btn {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.flex-form {
  // 表单样式
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.lot-min {
  // margin: 0 124px;
  padding: 8px 0px 8px 29px;
  font-size: 10px;
  color: #fa0606;
}
</style>
